<template>
  <div class="container">
    <div class="myinfo">
      <el-descriptions direction="vertical" class="margin-top" title="药品信息" :column="1" :size="size" style="margin: 20px 20px 24px 22px;" border>
        <el-descriptions-item label="【中药名】" :colon="true" style="width: 200px;" class="avatar-item">
          <div>
            <span style="margin-top: 90px;margin-left: 11px;font-size: 19px;color: red">{{userData.name}}</span>
          </div>
          <el-image
            style="width: 100px; height: 100px;margin-top: 23px"
            :src="userData.imageUrl"
          ></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="【分类】">{{userData.category}}</el-descriptions-item>
        <el-descriptions-item label="【别名】">{{userData.alias}}</el-descriptions-item>
        <el-descriptions-item label="【药用部位】">{{userData.medicinalPart}}</el-descriptions-item>
        <el-descriptions-item label="【临床应用】">{{userData.clinicalApplication}}</el-descriptions-item>
        <el-descriptions-item label="【药理研究】">{{userData.pharmacologicalResearch}}</el-descriptions-item>
        <el-descriptions-item label="【使用禁忌】">{{userData.contraindications}}</el-descriptions-item>
        <el-descriptions-item label="【配伍药方】">{{userData.compatibilityRescription}}</el-descriptions-item>
        <el-descriptions-item label="【功效与作用】">{{userData.efficacyEffects}}</el-descriptions-item>
        <el-descriptions-item label="【植物形态】">{{userData.plantMorphology}}</el-descriptions-item>
        <el-descriptions-item label="【采收加工】">{{userData.harvestingProcessing}}</el-descriptions-item>
        <el-descriptions-item label="【性味归经】">{{userData.meridianTaste}}</el-descriptions-item>
        <el-descriptions-item label="【产地分布】">{{userData.originDistribution}}</el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
// import request from '@/api/request'
import request from '@/api/request'
export default {
  data () {
    return {
      size: 'large',
      isEditing: false,
      dialogVisible: false,
      dialogImageUrl: '',
      imageUrl: '',
      formData: {
        imageUrl: ''
      },
      userData: {
        imageUrl: ''
      },
      category: ''
    }
  },
  created () {
    this.userinfo()
  },
  methods: {
    // const id = this.$route.query.id
    async userinfo (event, callback) {
      const token = localStorage.getItem('ordinaryUserToken') || localStorage.getItem('token')
      const id = this.$route.params.id
      // alert(JSON.stringify(category))
      try {
        await request.get('/tcMedicine/' + id, {
          headers: {
            accept: 'application/json',
            Authorization: 'Bearer ' + token
          }
        }).then(resp => {
          if (resp.data.code === 200) {
            this.userData = resp.data.data
            this.formData = resp.data.data
          }
        })
      } catch (error) {
        this.handleAxiosError(error)
      }
    },
    handleAxiosError (error) {
      // 检查是否是Axios的网络错误
      if (error.isAxiosError && error.response) {
        // 处理您的网络错误，例如显示用户友好的提示
        this.$message.error('网络请求失败，请稍后重试')
      } else {
        // 处理其他类型的错误
        this.$message.error('网络请求失败，发生错误，请稍后重试')
      }
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  margin: 20px;
}

.myinfo {
  width: 1200px;
  margin: auto;
  background-color: #ffffff;
}

.avatar-item .el-descriptions-item__label {
  width: 200px;
  float: left;
}

.avatar-item .el-descriptions-item__content {
  margin-left: 220px;
}

.el-tag {
  margin-right: 8px;
}

.edit-button {
  padding-top: 20px;
}
</style>
